<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 09:38:07
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-06 15:17:52
 -->
<template>
  <div class="app-container">
    <el-page-header :style="{ marginBottom: '20px' }" @back="routerBack">
      <div slot="content" class="content">
        <el-form inline>
          <el-form-item :label="patient.name"></el-form-item>
          <el-form-item :label="`${patient.age}`"></el-form-item>
          <el-form-item :label="sexEnum[patient.sex]"></el-form-item>
          <el-form-item label="手机号：">
            {{ patient.phoneNumber }}
          </el-form-item>
          <el-form-item label="病历：">{{ patient.caseNumber }}</el-form-item>
          <template v-if="$route.query.appointmentId">
            <el-form-item label="TC：">{{ appointment.tcName }}</el-form-item>
            <el-form-item label="医生：">
              {{ appointment.doctorName }}
            </el-form-item>
          </template>
        </el-form>
      </div>
    </el-page-header>
    <el-tabs v-model="currentTab" type="border-card">
      <el-tab-pane
        v-for="option in tabOptions"
        :key="option.label"
        :label="option.label"
        :name="option.name"
        :lazy="true"
      >
        <component
          :is="option.name"
          v-if="isRouterAlive && currentTab === option.name"
          :patient="patient"
          :appointment="appointment"
          @change="getPerson"
          @update="handleUpdate"
          @tab-change="handleTabChange"
          @cancel="routerBack"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getPerson } from '@/api/services/person'
import { getAppointment } from '@/api/services/appointment'
import { sexEnum } from '@/utils/enums'
import routerBack from '@/mixins/routerBack'

import Billing from '@/components/yiya/Billing'
import {
  ChargeRecordPane,
  ImageRecordPane,
  MedicalRecordPane,
  MemberInformationPane,
  PatientInformationPane,
  PayOrderRecordPane,
  SeeingAndTCVisitPane,
  TCVisitRecordPane,
  TreatmentRecordPane,
} from '@/views/components/TabsPanes'

export default {
  name: 'TCDetails',
  components: {
    Billing,
    PatientInformationPane,
    SeeingAndTCVisitPane,
    TCVisitRecordPane,
    TreatmentRecordPane,
    ImageRecordPane,
    MedicalRecordPane,
    ChargeRecordPane,
    MemberInformationPane,
    PayOrderRecordPane,
  },
  mixins: [routerBack],
  data() {
    return {
      tabOptions: [
        {
          label: '患者信息',
          name: 'PatientInformationPane',
        },
        // {
        //   label: '市场患者信息',
        //   name: 'MarketPatientInformation',
        // },
        {
          label: '开单操作',
          name: 'Billing',
        },
        {
          label: '开单记录',
          name: 'PayOrderRecordPane',
        },
        {
          label: '看诊/回访',
          name: 'SeeingAndTCVisitPane',
        },
        {
          label: '回访记录',
          name: 'TCVisitRecordPane',
        },
        {
          label: '就诊记录',
          name: 'TreatmentRecordPane',
        },
        {
          label: '影像',
          name: 'ImageRecordPane',
        },
        {
          label: '病历',
          name: 'MedicalRecordPane',
        },
        {
          label: '收费记录',
          name: 'ChargeRecordPane',
        },
        // {
        //   label: '会员信息',
        //   name: 'MemberInformationPane',
        // },
      ],
      currentTab: 'PatientInformationPane',
      patient: {},
      appointment: {},
      isRouterAlive: true,
    }
  },
  computed: {
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    currentTab() {
      this.reload()
    },
  },
  mounted() {
    this.getPerson()
    if (this.$route.query.appointmentId) {
      this.getAppointment()
    } else {
      this.tabOptions = this.tabOptions.filter(
        (option) => option.label !== '开单操作'
      )
    }
  },
  methods: {
    async getPerson() {
      const { data } = await getPerson(this.$route.query.id)
      this.patient = data
    },
    async getAppointment() {
      const { data } = await getAppointment(this.$route.query.appointmentId)
      this.appointment = data
    },
    handleTabChange(e) {
      this.currentTab = e
      this.reload()
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    handleUpdate() {
      this.getPerson()
      if (this.$route.query.appointmentId) {
        this.getAppointment()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: -6px;
  height: 20px;
}
</style>
